<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - jQuery UI version</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery UI styles -->
<link rel="stylesheet" href="http://cdn.bootcss.com/jqueryui/1.11.3/jquery-ui.min.css" id="theme">
<!-- Demo styles -->
<link rel="stylesheet" href="${ctx }/assets/lib/css/file/demo.css">
<link
	href="${pageContext.request.contextPath }/assets/lib/css/file/bootstrap/css/bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/assets/lib/css/file/fileinput.css"
	media="all" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- The file upload form used as target for the file upload widget -->
         <div class="container kv-main">
		     <form enctype="multipart/form-data">
		          <label>上传图片</label>
		          <input id="file-zh" name="file-zh[]" type="file" multiple>
		     </form>
	     </div>
	      <div class="container">
		     <p style="text-align:center;"">将"七牛"返回的url写到下面的input的value里，本来是隐藏的type="hidden"，为了调试方便type="text"</p>
		     <input id="imgulr" type="text" value="" style="width:100%; height:35px; padding-left:20px;">
	    </div>
<br>
<script
	src="${pageContext.request.contextPath }/assets/lib/js/file/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath }/assets/lib/js/file/fileinput.js"
	type="text/javascript"></script> <script
	src="${pageContext.request.contextPath }/assets/lib/js/file/locales/zh.js"
	type="text/javascript"></script> <script
	src="${pageContext.request.contextPath }/assets/lib/js/file/bootstrap-3.3.4.js"
	type="text/javascript"></script> <script>
		$('#file-zh').fileinput({
			language : 'zh', //设置语言，简体中文
			uploadUrl : '${pageContext.request.contextPath }/fileupload', //上传的地址
			allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后缀,
			maxFileCount : 1,//最大上传1张图片，根据具体情况而定
			enctype : 'multipart/form-data',
			showUpload : true, //是否显示上传按钮
			showCaption : false,//是否显示标题
			browseClass : "btn btn-primary", //按钮样式             
			previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
			msgFilesTooMany : "只允许上传{m}张图片！"
		});

		/* 上传的回调函数 ，依靠data.response.url取到回调的json*/
		$("#file-zh").on("fileuploaded",
				function(event, data, previewId, index) {
					console.log(data);
					var urldata = data.response.url;

					//赋值给隐藏域
					$("#imgulr").val(urldata);
				});
	</script>

<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="${ctx }/assets/lib/js/file/cors/jquery.xdr-transport.js"></script>
<![endif]-->
</body>
</html>
